<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script
      src="js/axios.min.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <style type="text/css">
      #product {
        /* width: 60%;
				margin: 0 auto; */
      }

      .items {
        width: 1200px;
        margin: 20px auto;
        display: flex;
        flex-wrap: wrap;

        /* justify-content: space-between; */
      }

      .items a {
        margin: 2rem 15px;
        width: 366px;
        height: auto;
      }

      .tabs {
        width: 360px;
        position: relative;
      }

      .items {
        width: 1200px;
        margin: 20px auto;
        display: flex;
        flex-wrap: wrap;

        /* justify-content: space-between; */
      }

      .items a {
        margin: 2rem 15px;
        width: 367px;
        height: 232px;
      }

      .tabs {
        width: 367px;
        height: 232px;
        position: relative;
        border: 1px solid #b7b7f8;

        border-radius: 10px;
        overflow: hidden;
        position: relative;
      }

      .items a .tabs img {
        display: block;
        width: 100%;
        height: 100%;
        margin: 0px auto;
      }

      .tabs p {
        position: absolute;
        top: 50%;
        left: 30px;
        margin-top: -15px;
        line-height: 30px;
        /* 	transform: translateY(-50%); */
        color: #d8f8ff;
        font-size: 20px;
        /* font-weight: 600; */
      }

      .tabs .color {
        color: #3e91c1;
      }

      /* .items a{
				margin: 2% 2rem ;
				width: 27%;
				height: auto;
			}
			.items a img{
				display: block;
				width: 100%;
				margin: 10px auto;
			} */
    </style>
  </head>
  <body class="conbody">
    <div id="product">
      <!-- <img src="img/e6699ad0ceed58e9a83b07321d7099a.png">
			<div id="">

			</div> -->
      <div class="header">
        <div class="left">苏州工业园区数字政府典型场景</div>
        <div class="right">
          <a href="topology.html">首页</a>
          <a href="Intellectualization.html">智慧化场景</a>
          <a href="integrated.html">整体性转型</a>
          <a href="base.html" class="action">平台型底座</a>
        </div>
        <div class="backbtn">
          <a href="index.html"> 返回</a>
        </div>
      </div>

      <div class="items">
        <a href="list/list.html">
          <div class="tabs">
            <img src="img/base/base1.png" />
            <p class="color">基础设施一云承载</p>
          </div>
        </a>

        <a href="resource/list1.html">
          <div class="tabs">
            <img src="img/base/base2.png" />
            <p>数据资源一池融通</p>
          </div>
        </a>
        <a href="fn/list1.html">
          <div class="tabs">
            <img src="img/base/base3.png" />
            <p>公共能力一体赋能</p>
          </div>
        </a>
        <a href="server/list1.html">
          <div class="tabs">
            <img src="img/base/base4.png" />
            <p class="color">服务感知一端智联</p>
          </div>
        </a>
      </div>
      <div style="height: 1px; padding: 1px"></div>

      <div class="footer">
        建设单位：苏州工业园区大数据管理局
        &nbsp;&nbsp;&nbsp;&nbsp;技术支持：新建元数字科技有限公司、天聚地合（苏州）数据股份有限公司
      </div>
    </div>

    <script src="js/util.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      var product = new Vue({
        el: "#product",
        data: {},
        created() {},
        mounted() {},
        methods: {},
      });
    </script>
  </body>
</html>
